<!--
    页面：单元格操作
    路由：/importSheet
    作者：尹竹群
    部门：查账开发部
    时间：2021-09
    编辑：
-->
<template>
  <div class="container">
    <Row v-tc-height="'100%'">
      <!-- luckysheet表格区域 -->
      <i-col span="21" v-tc-height="'100%'">
        <div class="luckysheet" id="importSheet"></div>
      </i-col>
      <!-- 控制台 -->
      <i-col span="3" v-tc-height="'100%'">
        <Card :bordered="false">
          <p slot="title">控制台</p>
          <p>
            <Row v-tc-bottom="10">
              <Col span="24">
                <Button type="primary" @click="handleCellValue(2, '=sum(A1)')"
                  >单元格设公式</Button
                >
              </Col>
            </Row>
            <Row>
              <Col>选择单元格，点击设置公式，之后请在A1单元格内输入数字</Col>
            </Row>
          </p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
// 引入loadsh
import { cloneDeep } from "lodash";
// 解析文件插件
import LuckyExcel from "luckyexcel";

export default {
  name: "importSheet",
  data() {
    return {
      // 表格初始化数据
      sheetData: {
        // 设定DOM容器的id
        container: "importSheet",
        // 是否显示顶部信息栏
        showinfobar: false,
        // 设定表格语言
        lang: "zh",
        hook: {
          cellEditBefore(range) {
            console.log(range);
            // return false;
          },
          printBefore(value) {
            console.log(1);
            window.print();
          }
        },
        // 表格
        data: [
          //数据
          {
            name: "表一", //工作表名称
            color: "",
            index: 0, //唯一id
            status: 1,
            order: 0,
            row: 20, //行数
            column: 20, //列数
            celldata: [
              //   {
              //     r: 0,
              //     c: 0,
              //     v: {
              //       m: 2,
              //       op: 1,
              //       tb: 1,
              //       v: 2
              //     }
              //   },
              //   {
              //     r: 1,
              //     c: 0,
              //     v: {
              //       m: 4,
              //       op: 2,
              //       tb: 2,
              //       v: 4
              //     }
              //   },
              //   {
              //     r: 2,
              //     c: 0,
              //     v: {
              //       ct: {
              //         //单元格值格式
              //         fa: "General", //格式名称为自动格式
              //         t: "n" //格式类型为数字类型
              //       },
              //       //   v: 233, //内容的原始值为 233
              //       //   m: 233, //内容的显示值为 233
              //       bg: "#f6b26b", //背景为 "#f6b26b"
              //       ff: 1, // 字体为 "Arial"
              //       fc: "#990000", //字体颜色为 "#990000"
              //       bl: 1, //字体加粗
              //       it: 1, //字体斜体
              //       fs: 9, //字体大小为 9px
              //       //   cl: 1, //启用删除线
              //       ht: 0, //水平居中
              //       vt: 0, //垂直居中
              //       //   tr: 2, //文字旋转 -45°
              //       tb: 2, //文本自动换行
              //       //   ps: {
              //       //     //批注
              //       //     left: 92, //批注框左边距
              //       //     top: 10, //批注框上边距
              //       //     width: 91, //批注框宽度
              //       //     height: 48, //批注框高度
              //       //     value: "I am a comment", //批准内容
              //       //     isshow: true //批注框为显示状态
              //       //   },
              //       f: "=SUM(A1,A2)" //单元格是一个求和公式
              //     }
              //   }
            ],
            data: [],
            config: {},
            allowEdit: false
          },
          {
            name: "表二",
            color: "",
            index: 1,

            status: 0,
            order: 1,
            celldata: [],
            config: {}
          }
        ]
      },
      // 备份数据
      copySheetData: null,
      // 表格数据
      showSheetData: null
    };
  },
  methods: {
    /**
     * 初始化报表
     */
    initSheet() {
      window.luckysheet.create(this.showSheetData);
    },
    /**
     * 设置单元格的值
     * @param {Number} number 位置
     * @param {String} value 待设置的值
     */
    handleCellValue(number = 0, value) {
      const range = window.luckysheet.getRangeWithFlatten();
      luckysheet.setCellValue(range[0].r, range[0].c, value);
    }
  },
  mounted() {
    this.showSheetData = cloneDeep(this.sheetData);

    // 初始化报表
    this.initSheet();
  }
};
</script>

<style scoped>
.luckysheet {
  width: 100%;
  height: 100%;
}
</style>
